<template>
  <div class="warpper">
    <div class="top">
      <a-button type="primary" @click="handleCreate">
        <template #icon>
          <PlusOutlined :style="{ fontSize: '24px' }" />
          创建问卷
        </template>
      </a-button>
    </div>

    <div class="bottom">
      <a-radio-group
        v-model:value="route"
        button-style="solid"
        @change="handleChange"
      >
        <a-radio-button :style="radioStyle" :value="MANAGEMINE">
          <template #icon>
            <DownloadOutlined />
            全部问卷
          </template>
          全部问卷
        </a-radio-button>
        <a-radio-button :style="radioStyle" :value="MANAGEDELETE">
          回收站
        </a-radio-button>
      </a-radio-group>
    </div>

    <!-- <a-button @click="handleBack">后台假页面跳转</a-button> -->
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { PlusOutlined, DownloadOutlined } from '@ant-design/icons-vue';
import {
  ANSWERINDEX,
  BACKUSER,
  CREATECHOOSE,
  MANAGEDELETE,
  MANAGEMINE,
} from '@/router/route-name';
import { RadioedEvent } from '@/model/type/RadioedEvent';
import router from '@/router';

export default defineComponent({
  components: { PlusOutlined, DownloadOutlined },
  setup() {
    const radioStyle = reactive({
      display: 'block',
      height: '44px',
      lineHeight: '44px',
      width: '240px',
    });

    const route = ref<string>(MANAGEMINE);

    const handleChange = (e: RadioedEvent) => {
      console.log(e);

      router.push({ name: e.target.value });
    };

    const handleCreate = () => {
      router.push({ name: CREATECHOOSE });
    };

    const handleBack = () => {
      router.push({ name: BACKUSER });
    };

    const handleAnswer = () => {
      router.push({ name: ANSWERINDEX, query: { id: '1234' } });
    };

    return {
      radioStyle,
      route,
      MANAGEMINE,
      MANAGEDELETE,
      handleChange,
      handleCreate,
      handleBack,
      handleAnswer,
    };
  },
});
</script>
<style lang="less" scoped>
.warpper {
  width: 340px;
  .top {
    button {
      width: 240px;
      height: 56px;
      font-size: 24px;
    }
  }
  .bottom {
    padding-top: 24px;
  }
}
</style>
